<template>
    <el-row :gutter="20">
        <!-- 部门树 -->
        <el-col :span="4" :xs="24">
            <div>
                <el-input v-model="filterDeptName"
                          placeholder="请输入部门名称"
                          clearable
                          size="small"
                          prefix-icon="el-icon-search"
                          style="margin-bottom: 20px">
                </el-input>
                <el-tree ref="deptTree"
                         :data="deptTreeData" :props="deptTreeProps"
                         :show-checkbox="false"
                         :default-expand-all="true"
                         @node-click="selectDeptUser"
                         :filter-node-method="filterNode">
                </el-tree>
            </div>
        </el-col>
        <!-- 用户列表 -->
        <el-col :span="20" :xs="24" v-hasPermi="['system:user:list']">
            <div>
                <!-- 查询条件 -->
                <el-form ref="selectForm" :model="queryParams" :inline="true">
                    <el-form-item label="用户名">
                        <el-input v-model="queryParams.userName"
                                  placeholder="请输入用户名称"
                                  clearable size="small"
                                  style="width: 240px"
                                  @keyup.enter.native="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="手机号">
                        <el-input v-model="queryParams.phonenumber"
                                  placeholder="请输入手机号码"
                                  clearable size="small"
                                  style="width: 240px"
                                  @keyup.enter.native="handleQuery"/>
                    </el-form-item>
                    <el-form-item label="状态">
                        <el-select
                                v-model="queryParams.status"
                                placeholder="用户状态"
                                clearable
                                size="small"
                                style="width: 240px">
                            <el-option v-for="dict in statusOptions"
                                       :key="dict.dictValue"
                                       :label="dict.dictLabel"
                                       :value="dict.dictValue"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="创建时间">
                        <el-date-picker size="small" v-model="dateRange" type="datetimerange"
                                        style="width: 240px" value-format="YYYY-MM-DD HH:mm:ss"
                                        range-separator="至" start-placeholder="开始日期"
                                        end-placeholder="结束日期">
                        </el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
                        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
                <!-- 新增 -->
                <el-row :gutter="10" class="mb8" v-hasPermi="['system:user:add']">
                    <el-col :span="1.5">
                        <el-button type="primary" plain icon="el-icon-plus"
                                   size="small" @click="handleAddUser">新增
                        </el-button>
                    </el-col>
                </el-row>
                <!-- 查询结果列表 -->
                <el-table :data="userListData"
                          style="width: 100%">
                    <el-table-column type="selection" width="50" align="center"/>
                    <el-table-column label="用户编号" align="center" prop="userId"/>
                    <el-table-column label="用户名称" align="center" prop="userName"/>
                    <el-table-column label="用户昵称" align="center" prop="nickName"/>
                    <el-table-column label="部门" align="center" prop="dept.deptName"/>
                    <el-table-column label="手机号码" align="center" prop="phonenumber" width="120"/>
                    <el-table-column label="状态" align="center">
                        <template v-slot="scope">
                            <el-switch v-model="scope.row.status"
                                       :active-value="0"
                                       :inactive-value="1"
                                       @change="handleStatusChange(scope.row)"
                            ></el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column label="创建时间" min-width="160px" align="center" prop="createTime"></el-table-column>
                    <el-table-column label="操作" align="center" width="250px">
                        <template v-slot="scope">
                            <el-button size="small" icon="el-icon-edit"
                                       @click="handleUpdateUser(scope.row)"
                                       v-hasPermi="['system:user:update']">修改
                            </el-button>
                            <el-button size="small" icon="el-icon-delete"
                                       @click="handleDeleteUser(scope.row)"
                                       v-hasPermi="['system:user:delete']">删除
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <el-pagination align="center" :page-sizes="[10, 20, 50, 100]"
                               layout="sizes,prev, pager, next, jumper"
                               :total="userListTotal"
                               :page-size="queryParams.pageSize"
                               :current-page="queryParams.pageNum"
                               @current-change="handleUserListChange"
                               @size-change="handleSizeChange"
                               prev-text="上一页" next-text="下一页"
                               :hide-on-single-page="true">
                </el-pagination>
            </div>
        </el-col>
    </el-row>
    <!-- 增加或修改用户信息 -->
    <update :title="title" :form="form" :open="open"
            :role-options="roleOptions"
            v-on:dialogStatusChanged="changeDialogStatus($event)">
    </update>
</template>

<script>
    import {treeSelect} from '/src/api/system/dept'
    import {getUserList, getUser, changeUserStatus} from '/src/api/system/user'
    import update from './update.vue'

    export default {
        name: "index",
        components: {update},
        data() {
            return {
                filterDeptName: '',
                deptTreeData: [],
                deptTreeProps: {
                    children: 'children',
                    label: 'label'
                },
                userListData: [],
                userListTotal: 0,
                dateRange: [],
                queryParams: {
                    pageNum: 1,
                    pageSize: 10,
                    deptId: undefined,
                    userName: undefined,
                    phonenumber: undefined,
                    status: undefined
                },
                // 状态数据字典
                statusOptions: [],
                // 性别状态字典
                sexOptions: [],
                //角色集合
                roleOptions: [],
                //新增或修改的弹出框
                open: false,
                //弹出框标题
                title: '',
                //新增或修改时的form对象
                form: {},
            }
        },
        watch: {
            filterDeptName(val) {
                this.$refs.deptTree.filter(val);
            }
        },
        created() {
            this.init()
        },
        methods: {
            //初始化
            init() {
                this.getDicts("sys_normal_disable").then(response => {
                    this.statusOptions = response.data;
                });
                this.getDicts("sys_user_sex").then(response => {
                    this.sexOptions = response.data;
                });
                this.deptTreeSelect()
                this.getUserListByParam()
            },
            //获取部门树
            deptTreeSelect() {
                treeSelect().then((res) => {
                    this.deptTreeData = res.data
                })
            },
            //过滤部门树
            filterNode(value, data) {
                if (!value) return true;
                return data.label.indexOf(value) !== -1;
            },
            //获取用户列表
            getUserListByParam() {
                getUserList(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
                    this.userListData = res.rows
                    this.userListTotal = res.total
                })
            },
            //分页 页码改变事件
            handleUserListChange: function (currentPageNum) {
                this.queryParams.pageNum = currentPageNum
                this.getUserListByParam()
            },
            //分页 页码条数改变事件
            handleSizeChange: function (currentPageSize) {
                this.queryParams.pageSize = currentPageSize
                this.getUserListByParam()
            },
            //根据部门id查询其下的用户
            selectDeptUser(data) {
                this.queryParams.pageNum = 1
                this.queryParams.deptId = data.id;
                this.getUserListByParam()
            },
            //根据条件查询用户
            handleQuery() {
                this.queryParams.pageNum = 1
                this.getUserListByParam()
            },
            //重置表单
            resetQuery() {
                this.dateRange = []
                this.resetForm('selectForm')
                this.getUserListByParam()
            },
            //状态改变事件
            handleStatusChange(row) {
                let text = row.status === 0 ? "启用" : "停用";
                this.$confirm('确认要"' + text + '""' + row.userName + '"用户吗?', "警告", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                }).then(function () {
                    return changeUserStatus(row.userId, row.status);
                }).then(() => {
                    this.msgSuccess(text + "成功");
                }).catch(function () {
                    row.status = row.status === 0 ? 1 : 0;
                });
            },
            //修改用户事件
            handleUpdateUser(row) {
                this.form = row
                this.title = "修改用户信息"
                this.open = true
                const userId = row.userId
                getUser(userId).then(res => {
                    this.roleOptions = res.roles
                    this.form.roleIds = res.roleIds;
                })
            },
            //删除用户
            handleDeleteUser(row) {

            },
            //新增用户
            handleAddUser() {
                this.form = {}
                this.title = "新增用户信息"
                this.open = true
                getUser().then(res => {
                    this.roleOptions = res.roles
                })
            },
            //更改弹出框的状态
            changeDialogStatus(status) {
                this.open = status
                this.getUserListByParam()
            },
        },
    }
</script>

<style scoped>

</style>
